
<script>
import dmbForm from "@/components/DmbForm";
import dmbTable from "@/components/LTable/index.vue";
import {
  formBase,
  formBaseSelling,
  tableBase,
  cellStyle,
  headerCellStyle,
  tableFormStyle,
  formItemStyle,
} from "./config";
import { mapState } from "vuex";
import dayjs from "dayjs";
import store from "@/store";
const defaultForm = {
  startTime: "",
  endTime: "",
  userId: "",
  store: "",
};
const defaultForm_selling = {
  userId: "",
  remarks: "",
  incDecIntegral: "",
};
import { customsClearanceCompany_ListAPI } from "@/api/data/customs-clearance-company.js";
import {
  integral_sellingAPI,
  importIntegralSellingAPI,
} from "@/api/payment/integral_selling.js";
export default {
  name: "integral_selling",
  computed: {
    ...mapState({
      company: (state) => state.custom_dict.company,
      shop: (state) => state.custom_dict.shop,
    }),
    formItemStyle() {
      return formItemStyle;
    },
    tableFormStyle() {
      return tableFormStyle;
    },
    cellStyle() {
      return cellStyle;
    },
    headerCellStyle() {
      return headerCellStyle;
    },
  },
  components: { dmbTable, dmbForm },
  data() {
    return {
      propsSearchForm: { ...defaultForm },
      sellingForm: { ...defaultForm_selling },
      rebase: formBase,
      rebase_selling: formBaseSelling,
      requestConfig: {
        url: "/payment/integralSelling/queryIntegralSelling",
        method: "get",
        montage: true,
      },
      selectionArr: [], // 多选框内容
      selectionArr2: [], // 多选框内容
      tableSearchForm: { ...defaultForm },
      listUser: [],
      customsClearanceCompany_List: [],
      excelData: [],
    };
  },
  mounted() {
    customsClearanceCompany_ListAPI()
      .then((res) => {
        console.log(
          "清关",
          res,
          this.rebase.find((el) => el.label === "清关公司")
        );
        this.rebase.find((el) => el.label === "清关公司").options = res.rows;
        this.customsClearanceCompany_List = res.rows;
      })
      .catch((err) => {});
  },
  methods: {
    tableBase() {
      return tableBase;
    },
    // 导出
    async downLoad() {
      console.log(1, this.selectionArr);
      if (this.selectionArr.length > 0) {
        const ids = this.selectionArr.map((v) => v.id);
        this.download(
          "/payment/integralSelling/export",
          { ids },
          `积分销售_${dayjs().format("YYYY-MM-DD HH:mm:ss")}.xlsx`
        );
      } else {
        this.$message.error("请选择条数据导出");
      }
    },
    // 多选框内容
    selectionChange(data) {
      this.selectionArr = data;
    },
    selling() {
      integral_sellingAPI(this.sellingForm).then((res) => {
        this.$refs.sellingForm.clear();
        this.$message.success(res.msg);
      });
    },
    excel_success(response) {
      console.log("上传的表", response.rows);
      this.excelData = [...response.rows];
    },
    importExcel() {
      if (!this.excelData.length) return this.$message.err("请先现在excel");
      importIntegralSellingAPI(this.excelData).then((res) => {
        this.clear();
        this.$message.success(res.msg);
      });
    },
    clear() {
      this.excelData.splice(0);
    },
  },
  watch: {
    propsSearchForm: {
      deep: true,
      handler: function (value) {
        this.tableSearchForm = { ...value };
        delete this.tableSearchForm.shelfTime;
        // 日期
        if (!value?.shelfTime?.length) {
          this.tableSearchForm.startDate = "";
          this.tableSearchForm.endDate = "";
        } else if (value?.shelfTime?.length) {
          this.tableSearchForm.startDate = dayjs(value.shelfTime[0]).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          this.tableSearchForm.endDate = dayjs(value.shelfTime[1]).format(
            "YYYY-MM-DD HH:mm:ss"
          );
        }
        // 店铺
        if (value.store) {
          const obj = this.shop.find((item) => {
            return item.id == value.store;
          });
          this.tableSearchForm.store = obj ? obj.shopName : "";
        }
      },
    },
  },
};
</script>
<template>
  <div>
    <div class="overflow-auto flex justify-around">
      <el-card class="box-card">
        <el-divider content-position="left">积分销售</el-divider>
        <dmb-form
          ref="sellingForm"
          :form-items="rebase_selling"
          :model-value="sellingForm"
          :item-style="formItemStyle"
          @update="(row) => (sellingForm = row)"
        >
          <template v-slot:header="row" class="flex flex-row-reverse">
            <div class="mb-3 flex flex-row-reverse">
              <div>
                <el-button type="success" @click="selling">积分销售</el-button>
              </div>
            </div>
          </template>
        </dmb-form>
      </el-card>
      <el-card>
        <el-divider content-position="left">excel与导入</el-divider>
        <div class="flex relative">
          <div class="w-200 h-50 overflow-auto mr-6 relative">
            <i
              v-if="excelData.length"
              @click="clear"
              class="el-icon-close absolute top-1 right-1 z-10"
            ></i>
            <el-table :data="excelData" style="width: 100%">
              <el-table-column prop="userId" label="会员ID" width="180">
              </el-table-column>
              <el-table-column prop="userName" label="会员" width="200">
              </el-table-column>
              <el-table-column prop="incDecIntegral" label="积分">
              </el-table-column>
              <el-table-column prop="remarks" label="备注"> </el-table-column>
            </el-table>
          </div>
          <div>
            <el-upload
              :multiple="false"
              :show-file-list="false"
              accept=".xls,.xlsx"
              action="/dev-api/payment/integralSelling/excelAnalysis"
              :on-success="excel_success"
            >
              <el-button size="small" type="primary">excel</el-button>
            </el-upload>
            <el-button
              class="mt-4"
              size="small"
              type="success"
              @click="importExcel"
              >导入</el-button
            >
          </div>
        </div>
      </el-card>
    </div>
    <el-divider content-position="left">历史销售记录</el-divider>
    <div class="overflow-auto">
      <dmb-form
        ref="form"
        :form-items="rebase"
        :model-value="propsSearchForm"
        :item-style="formItemStyle"
        @update="(row) => (propsSearchForm = row)"
      >
        <template v-slot:header="row" class="flex flex-row-reverse">
          <div class="mb-3 flex flex-row-reverse">
            <div>
              <el-button type="success" @click="$refs.table.getListData()"
                >查询</el-button
              >
              <el-button type="primary" @click="downLoad">导出</el-button>
            </div>
          </div>
        </template>
      </dmb-form>
    </div>
    <dmb-table
      ref="table"
      :CustomDoubleClick="true"
      :prop-list="tableBase()"
      :show-index-column="true"
      select-column-type="CHECKBOX"
      :props-search-form="tableSearchForm"
      :req-request="requestConfig"
      select-key="id"
      :cell-style="cellStyle"
      :header-cell-style="headerCellStyle"
      :initialize="false"
      :change-search-form="false"
      :show-footer="true"
      :form-item-style="tableFormStyle"
      @selectionChange="
        (row) => {
          selectionArr = row;
        }
      "
    />
  </div>
</template>

<style scoped lang="scss">
.el-divider {
  background-color: #87ceeb;
}
</style>
